<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图书查询</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
	<center>
		<h1>图书查询</h1>
		<p>
			图书ID：<input type="text" name="bookID">
			图书名：<input type="text" name="bookName">
			分类：<input type="text" name="catgoryName">
			<input type="button" value="查询" id="seek">
		</p>
		<hr>
		<table width="800px" cellspacing="0px" cellpadding="0px" border="1px">
			<thead>
				<tr>
					<th>图书ID</th>
					<th>书名</th>
					<th>分类</th>
					<th>价格</th>
					<th>描述</th>
				</tr>
			</thead>
			<tbody id="cont">
				<c:forEach items="${books}" var="Book">
					<tr>
						<td>${Book.ID}</td>
						<td>${Book.bookName}</td>
						<td>${Book.bookClass}</td>
						<td>${Book.price}</td>
						<td>${Book.bookInfo}</td>
					</tr>
                </c:forEach>
			</tbody>
		</table>
	</center>
	
</body>
    <script type="text/javascript">
            $("#seek").click(function () {
                $.ajax({
                    url: "<%=basePath%>/SelectBookServlet",
                    type: "post",
                    data: {
                        bookID: $("input[name=bookID]").val(),
                        bookName: $("input[name=bookName]").val(),
                        catgoryName: $("input[name=catgoryName]").val()
                    },
                    datatype: "json",
                    success:function (json) {
                        $("#cont").empty(); //清空表格
                        $.each(JSON.parse(json), function(i, result) {
                            var str = "<tr><td>"
                                + result['ID']
                                + "</td><td>"
                                + result['bookName']
                                + "</td><td>"
                                + result['bookClass']
                                + "</td><td>"
                                + result['price']
                                + "</td><td>"
                                + result['bookInfo']
                                + "</td></tr>";
                            $("#cont").append(str);
                        });
                    }
                })
            });
    </script>
</html>